<template>
  <div id="modify-info">
    <el-form :model="info"
             :rules="rules"
             label-width="60px"
             :label-position="'right'"
             ref="info">
      <el-form-item label="昵称：">
        <el-input name="nickname"
                  placeholder="请输入您的昵称"
                  v-model="info.nickname"
                  :disabled="!editing||changing"
                  clearable />
      </el-form-item>
      <el-form-item prop="phone"
                    label="手机：">
        <el-input name="phone"
                  placeholder="请输入您的手机号"
                  v-model="info.phone"
                  type="tel"
                  :disabled="!editing||changing"
                  clearable />
      </el-form-item>
      <el-form-item prop="email"
                    label="邮箱：">
        <el-input name="email"
                  placeholder="请输入您的邮箱"
                  v-model="info.email"
                  type="email"
                  :disabled="!editing||changing"
                  clearable />
      </el-form-item>
    </el-form>
    <el-row class="btn-row">
      <el-button @click="editHandle"
                 type="primary"
                 :disabled="changing">{{ editing? "保存": "编辑" }}</el-button>
    </el-row>
  </div>
</template>

<script>
import { updateInfo } from '@/api/user'
import { mapGetters } from 'vuex'
import validators from '@/utils/validate'

export default {
  name: 'InfoCard',
  data () {
    return {
      editing: false, // 是否为编辑状态
      changing: false, // 是否提交请求
      info: {},
      rules: {
        phone: [
          { validator: validators.phone, trigger: 'blur' }
        ],
        email: [
          { validator: validators.email, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    changeVal: function () {
      if (this.info.phone === this.user.phone) {
        if (this.info.email === this.user.email) {
          if (this.info.nickname === this.user.nickname) { return false }
        }
      }
      return true
    }
  },
  mounted () {
    // 深拷贝
    this.info = JSON.parse(JSON.stringify(this.user))
  },
  methods: {
    editHandle () {
      if (this.editing && this.changeVal) {
        this.$refs.info.validate((valid) => {
          if (valid) {
            this.changing = true
            updateInfo(this.info)
              .then(res => {
                this.$notify.success({
                  title: '成功',
                  message: res.data,
                  position: 'bottom-right'
                })
                console.log(this.info)
                this.$store.dispatch('user/updateUserinfo', this.info)
                this.changing = false
                this.editing = false
              })
          }
        })
      } else this.editing = !this.editing
    }
  }
}
</script>

<style lang="stylus" scoped>
.btn-row
  display flex
  flex-direction row
  justify-content flex-end
</style>
